
<div class="container">

  <p>发起结伴<span class="fu-title">(一个真诚的请求，才会赢的更多靠谱的旅伴)</span></p>

  <!-- 表单开始 -->
<table>

        <div class="form-box">
          <tr>
            <td>
              <i style="color:red;font-size:20px;margin-right:4px">*</i>
              <span>活动标题</span> 
            </td>
            <td>
              <input type="text" placeholder="一句话开启一段靠谱旅程" class="in active-title">
            </td>
          </tr>
        </div>
    
        <div class="form-box">
          <tr>
            <td>
              <i style="color:red;font-size:20px;margin-right:4px">*</i>
              <span>联系方式</span> 
            </td>
            <td>
               <span class="lian1">电话／</span> 
               <div class="lian-box">
                 <input type="text" class="in wu">
               </div>
                
               <span class="lian2">微信／</span> 
               <div class="lian-box">
                  <input type="text" class="in wu">
               </div>
                
               <span class="lian3">QQ/</span> 
               <div class="lian-box">
                  <input type="text" class="in wu">
               </div>
                
            </td>
          </tr>
       </div>    

       <div class="form-box">
          <tr>
            <td>
              <i style="color:red;font-size:20px;margin-right:4px">*</i>
              <span>目的地</span> 
            </td>
            <td>
              <input type="text" class="in common short" placeholder="请输入目的地">
            </td>
          </tr>
       </div>    

       <div class="form-box">
          <tr>
            <td>
              <i style="color:red;font-size:20px;margin-right:4px">*</i>
              <span>出发地</span> 
            </td>
            <td>
              <input type="text" class="in common short" placeholder="请输入出发地">
            </td>
          </tr>
       </div> 
       
       <div class="form-box">
          <tr>
            <td>
              <i style="color:red;font-size:20px;margin-right:4px">*</i>
              <span >出发日期</span> 
            </td>
            <td>
              <input type="date" class="in common" >
            </td>
          </tr>
       </div>
       
       <div class="form-box">
          <tr>
            <td>
              <i style="color:red;font-size:20px;margin-right:4px">*</i>
              <span>活动天数</span> 
            </td>
            <td>
              <input type="text" class="in common">天
            </td>
          </tr>
       </div>  
       
       <div class="form-box">
          <tr>
            <td>
              <i style="color:red;font-size:20px;margin-right:4px">*</i>
              <span>限制人数</span> 
            </td>
            <td>
              <input type="text" class="in common">人
            </td>
          </tr>
       </div> 
       
       <div class="form-box">
          <tr>
            <td>
              <i style="color:red;font-size:20px;margin-right:4px">*</i>
              <span>结伴描述</span> 
            </td>
            <td>
              <textarea class="in common" cols="50" rows="10">

              </textarea>
            </td>
          </tr>
       </div>   
       
       <div class="form-box">
          <tr>
            <td>
              <i style="color:red;font-size:20px;margin-right:4px">*</i>
              <span>封面图片</span> 
            </td>
            <td>
              <!-- 
                1、怎么在TS 的代码中获取 页面中 dom 元素
                2、怎么生成虚拟路径
              -->
              <!-- @ViewChild 实现 ID 选择 在对应的DOM元素上 添加 #名称 属性-->
              <input #file type="file" style="display:none" (change)="selectFile($event)">                
              <img src="{{imgUrl}}" alt=""  (click)="clickFile()" class="in pic">
            </td>
          </tr>
       </div>   

       <div class="form-box">
        <tr>
          <button class="btn">发表结伴</button>
        </tr>
     </div>   
       
       

</table>

</div>
